<template>
	<view class="b-clone fixAutoNoPd" :class="{'mb10': !isLast }">
		<view class="item">
			<slot></slot>
		</view>
		<view class="w35 grayBgs father bt bb" v-if="_showAddIcon || _showRemoveIcon">
			<view class="abs flex ar" style="flex-direction: column;">
				<view class="pd" @tap="_add" v-if="_showAddIcon">
					<block v-if="$slots.add">
						<slot name="add"></slot>
					</block>
					<block v-else>
						<view class="sIcon-addCircle hoverMain bold fz16"></view>
					</block>
				</view>
				
				<view class="pd" @tap="_remove" v-if="_showRemoveIcon">
					<block v-if="$slots.remove">
						<slot name="remove"></slot>
					</block>
					<block v-else>
						<view class="sIcon-subCircle hoverMain bold fz16" ></view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseFamily from "../../common/base-family.js" ;
	export default {
		name:"b-clone",
		mixins : [baseFamily],
		data() {
			return {
				isLast : false ,
				index : -1 ,
				canRemove : false
			}
		},
		computed:{
			_showAddIcon(){
				return this.parent && this.parent._showAddIcon ;
			},
			_showRemoveIcon(){
				return this.parent && this.parent._showRemoveIcon ;
			}
		},
		created() {
			this.parent = this.getParent("b-maker") ;
			if (!this.parent) {
				throw new Error("b-clone should use with b-maker");
			}
			this.parent._setChildData();
		},
		methods: {
			_add(){
				this.parent && this.parent.add(this.index);
			},
			_remove(){
				this.parent && this.parent.remove(this.index);
			}
		}
	}
</script>
<style>
	.ml8{
		margin-left: 8px;
	}
	.w35{
		width: 35px;
	}
	.grayBgs{
		background-color: #f7f7f7;
	}
</style>